<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>z手写vue源码</title>
</head>

<body>
	<div id="app" class="body">
		<div class="b_header">
			<img class="b_img" src="https://cn.vuejs.org/images/logo.png" /><span>z手写vue源码</span>
		</div>
		<div class="b_content">
			<div class="n_name">姓名：{{name}}</div>
			<div>{{content}}</div>
			<div>
				<input type="text" z-model="content" placeholder="请输入自我介绍" />
			</div>
		</div>
	</div>
	<style>
		.body {
			text-align: left;
			width: 300px;
			margin: 0 auto;
			margin-top: 100px;
		}

		.body .b_header {
			display: flex;
			justify-item: center;
			justify-content: center;
			align-items: center;
			align-content: center;
			margin-bottom: 20px;
		}

		.body .b_header span {
			font-size: 21px;
		}

		.body .b_img {
			display: inline-flex;
			width: 20px;
			height: 20px;
			align-item: center;
		}

		.body .b_content {}

		.body div {
			margin-top: 10px;
			min-height: 20px;
		}

		button {
			margin-top: 20px;
		}
	</style>
	<script src="./zVue.js"></script>
	<script>
		const w = new zVue({
			el: '#app',
			data: {
				"name": "weizhan",
				"content": "我是一枚优秀的程序员",
				"htmlSpan": '<a href="http://wwww.zhuangweizhan.cn">点击欢迎进入个人主页 </a>',
			},
		})
	</script>

	<div style="position: fixed;bottom: 0;text-align: center;width: 100%;padding: 25px 0;background-color: #bfd6e8;color: #843838;font-size:18px;">
		<div style="font-size:20px;margin-bottom:20px;">欢迎访问主页</div>
		<div>个人github：
			<a style="color:#843838;" target="_blank" href="https://github.com/zhuangweizhan">https://github.com/zhuangweizhan</a>
		</div>
		<div>个人掘金：
			<a style="color:#843838;" target="_blank" href="https://juejin.im/user/5e8fddc9e51d4546be39a558">https://juejin.im/user/5e8fddc9e51d4546be39a558</a>
		</div>
		<div>本源码博客解说：
			<a style="color:#843838;" target="_blank" href="https://juejin.im/post/5f0326786fb9a07e976bd945"> https://juejin.im/post/5f0326786fb9a07e976bd945</a>
		</div>
	</div>
	
</body>

</html>